<script type="text/javascript">
	$(document).ready(function(){
		initialize();
		muraille();
		bassin();
		arbre();
		initEvent();
	});
	
</script>

<script type="text/javascript" src="<?php echo $this->baseUrl()?>/js/contextMenu.js"></script>
 <script type="text/javascript" src="<?php echo $this->baseUrl()?>/js/matrice.js"></script>
 <script type="text/javascript" src="<?php echo $this->baseUrl()?>/js/point.js"></script>
 <script type="text/javascript" src="<?php echo $this->baseUrl()?>/js/event.js"></script> 
 <link href="<?php echo $this->baseUrl()?>/css/matrice.css" media="screen" rel="stylesheet" type="text/css" >


 
  <div id="map_canvas" style ="width:100%; height:100%"></div>
   <div class="containerPlus draggable resizable {buttons:'m', skin:'black', width:'350', height:'300',title:'Menu' }" style="top:10px; left:2%">
    <div id="dock"> </div><div style="clear:both;"></div>
    <hr>
    <a><b>L&eacute;gendes</b></a>
			
			<div id="id" style = "padding-top : 20px; margin-left:10px;">
				<input id="contour" type="checkbox" class="checkbox" checked="checked" name="name" value="value" />
				Contour<br><br>
				<input id="terrain" type="checkbox" class="checkbox" checked="checked" name="name" value="value" />
				Terrain<br><br>
				<input id="bassin" type="checkbox" class="checkbox" checked="checked" name="name" value="value" />
				Bassin de r&eacute;tention<br><br>
				<input id="arbre" type="checkbox" class="checkbox" checked="checked" name="name" value="value" />
				Arbre<br><br>
				</div>
	
  </div>

 <div id="demoContainer" class="containerPlus draggable resizable {buttons:'i,m', skin:'black', width:'350', height:'100',title:'Actualit&eacute;' }" style="bottom:10px; left:2%">
    <div id="dock"> </div><div style="clear:both;"></div>
    <hr>
   
  </div>

  <div class="containerPlus draggable resizable {buttons:'m,i', icon:'browserBr.png', skin:'white', width:'990',iconized:'true', dock:'dock', grid:100, title:'La Matrice'}" style="position:fixed;top:30px;left:150px"
  id= "matrice">
  <br/>
   <br/>
    <div class="evidence">
    <a class="prev browse left"></a>

<!-- root element for scrollable -->
	<div class="scrollable">   
  
   		<!-- root element for the items -->
   		<div class="items">
   
    		 <div class = "selectable" id = "pageBr0" >
     			<?php for ($i = 0; $i <=15; $i++){ for ( $j = 0 ; $j <= 35; $j++ ) { ?>
      			<div class="cell" <?php echo ' i = "'.$i.'" j = "'.$j.'"'?>></div>
      			<div class = "tooltip" id = "BR<?php echo $i."_".$j;?>">
      				<b> BR <span style = "font-size : x-small"><?php echo $i.",".$j ?> </span></b><br/><br/>
      	 			 Pays : S&eacute;n&eacute;gal<br/>
      	  			 R&eacute;gion : Dakar<br/>
      	  			 Disponible : OUI
      			</div>
      			<?php } ?>
      			<br/>
      			<?php } ?>
  			</div>
      
      	
  		</div><!--items !-->
	</div><!--scrollable !-->
   <a class="next browse right"></a>
   </div>
   <div class = "MenuBr"> 
    	<fieldset style ="margin : 20px;"> 
    		<legend>Menu </legend>
    		Localiser Terrain <br/>
    		   i : <input type="text"  name="i" id = "localiserI" size="5"  /><br/>
    		   j : <input type="text"  name="j" id = "localiserJ" size="5"  /> 
    		   <br />
    		   <input type="button" class="button" name="localiser" id="localiser" value="Localiser" />
    		   <input type="button" class="button" name="parcourir" id="parcourirbr" value="Parcourir" />
    	</fieldset>
    
   	    <fieldset style ="margin : 20px;"> <legend>Les Pays </legend>
    		<a href="#" onclick = "seekToCountrie(1)"> Senegal</a><br/>
    		<a href="#" onclick = "seekToCountrie(13)"> Mali </a><br/>
    		<a href="#" onclick = "seekToCountrie(19)"> Niger </a><br/>
    		
    		<a href="#"> Burkina Fasso </a><br/>
    		<a href="#"> Tchad </a><br/>
    		<a href="#"> Soudan </a><br/>
    		<a href="#"> Ethiopie </a><br/>
    		<a href="#"> Djibouti </a>
    	</fieldset>
   </div>
	<div id = "ville1" style = "width : 50px; height : 30px; position :relative; top : -394px;"><b>Dakar</b></div>
	<div id = "ville2" style = "width : 50px; height : 30px; position :relative; top : -424px; left : 700px "><b>Dakar</b></div>
	<div id = "ville3" style = "width : 50px; height : 30px; position :relative; top : -120px;"><b>Dakar</b></div>
	<div id = "ville4" style = "width : 50px; height : 30px; position :relative; top : -150px; left : 650px "><b>Dakar</b></div>
</div>


<div id="newItem" style="display:none">
	<div id ="added"></div>
</div>


<div class="containerPlus draggable resizable {buttons:'m,i', icon:'browserGmv.png', skin:'white', width:'990',iconized:'true', dock:'dock', grid:100, title:'La Matrice GMV'}" style="position:fixed;top:30px;left:100px"
 id= "GMV">
 <br/>
   
   
    <div class="evidence">
    <a class="prev browse left"></a>

<!-- root element for scrollable -->
<div  class = "myscrollable">   
  
   <!-- root element for the items -->
   <div class="items">
   
      <!-- 1-5 -->
   <div class = "selectable" id = "pageGmv0" >
     			<?php for ($i = 0; $i <=15; $i++){ for ( $j = 0 ; $j <= 35; $j++ ) { ?>
      			<div class="cellArbreGMV" <?php echo ' i = "'.$i.'" j = "'.$j.'"'?>></div>
      			<div class = "tooltip" id = "GMV<?php echo $i."_".$j;?>">
      				<b> GMV <span style = "font-size : x-small"><?php echo $i.",".$j ?> </span></b><br/><br/>
      	 			 Pays : S&eacute;n&eacute;gal<br/>
      	  			 R&eacute;gion : Dakar<br/>
      	  			 Disponible : OUI
      			</div>
      			<?php } ?>
      			<br/>
      			<?php } ?>
  			</div>
      
      	
   </div>

</div>


<!-- "next page" action -->
<a class="next browse right"></a>

<div class = "MenuBr"> 
    	<fieldset style ="margin : 20px;"> 
    		<legend>Menu </legend>
    		Localiser arbre <br/>
    		   i : <input type="text"  name="i" id = "localiserIarbre" size="5"  /><br/>
    		   j : <input type="text"  name="j" id = "localiserJarbre" size="5"  /> 
    		   <br />
    		   <input type="button" class="button" name="localiser" id="localiserarbre" value="Localiser" />
    		    <br />
    		   <input type="button" class="button" name="parcourir" id="parcourirarbre" value="parcourir" />
    	</fieldset>
    
   	    <fieldset style ="margin : 20px;"> <legend>Les Pays </legend>
    		<a href="#" onclick = "seekToCountrieGmv(1)"> Senegal</a><br/>
    		<a href="#" onclick = "seekToCountrieGmv(13)"> Mali </a><br/>
    		<a href="#" onclick = "seekToCountrieGmv(19)"> Niger </a><br/>
    		
    		<a href="#"> Burkina Fasso </a><br/>
    		<a href="#"> Tchad </a><br/>
    		<a href="#"> Soudan </a><br/>
    		<a href="#"> Ethiopie </a><br/>
    		<a href="#"> Djibouti </a>
    		
    	</fieldset>
   </div>
	<div id = "villeGMV1" style = "width : 50px; height : 30px; position :relative; top : -394px;"><b>Dakar</b></div>
	<div id = "villeGMV2" style = "width : 50px; height : 30px; position :relative; top : -424px; left : 700px "><b>Dakar</b></div>
	<div id = "villeGMV3" style = "width : 50px; height : 30px; position :relative; top : -120px;"><b>Dakar</b></div>
	<div id = "villeGMV4" style = "width : 50px; height : 30px; position :relative; top : -150px; left : 650px "><b>Dakar</b></div>

  </div>
</div>
 <ul id="myMenuGMV" class="contextMenu"> 
			<li class="eau"><a href="#eau">D&eacute;finir zone eau</a></li> 
			<li class="case"><a href="#case">D&eacute;finir zone village</a></li>
			<li class="batiment"><a href="#ville">D&eacute;finir zone ville</a></li> 
			<li class="cut separator"><a href="#cut">Continuer la s&eacute;lection</a></li> 
			
		</ul> 
<ul id="myMenuBR" class="contextMenu"> 
			<li class="bassin"><a href="#bassin">Parcelle avec bassin</a></li>
 			<!--<li class="nonbassin"><a href="#sansBassin">Parcelle sans bassin</a></li>!-->
			<li class="eau separator"><a href="#eau">D&eacute;finir zone eau</a></li> 
			<li class="case"><a href="#case">D&eacute;finir zone village</a></li>
			<li class="batiment"><a href="#ville">D&eacute;finir zone ville</a></li> 
			<li class="cut separator"><a href="#cut">Continuer la s&eacute;lection</a></li> 
			
		</ul> 
		